function EditSampleAtrributeGui(prefix, container, item) {
  this._prefix = prefix;
  this._container = container;
  this._item = item;
  
  this._createElements();
};

EditSampleAtrributeGui.prototype._createElements = function() {
  var div, table, tr, td, input, select;
  
  table = document.createElement('table');
  table.style.backgroundImage = 'url(images/pageasst/pagebackendsample/attrtop.png)';
  table.style.backgroundRepeat = 'no-repeat';
  table.style.width = '833px';
  table.style.height = '15px';
  table.cellPadding = 0;
  table.cellSpacing = 0;
  this._container.appendChild(table);
  
  table = document.createElement('table');
  table.style.backgroundImage = 'url(images/pageasst/pagebackendsample/attrmiddle.png)';
  table.style.backgroundRepeat = 'repeat-y';
  table.style.width = '833px';
  table.style.height = '100px';
  table.cellPadding = 0;
  table.cellSpacing = 0;
  this._container.appendChild(table);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.width = '50px';
  td.style.textAlign = 'center';
  td.style.verticalAlign = 'top';
  var img = document.createElement('img');
  img.src = 'images/pageasst/pagebackendsample/attribute.png';
  img.style.margin = '15px 15px 0 0';
  td.appendChild(img);
  td = tr.insertCell(-1);
  contentTable = document.createElement('table');
  contentTable.style.width = '730px';
  contentTable.style.height = '30px';
  td.appendChild(contentTable);
  tr = contentTable.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.height = '23px';
  td.style.fontSize = '15px';
  td.style.fontFamily = 'Tahoma';
  td.style.fontWeight = 'bold';
  td.style.color = '#109e39';
  td.style.textAlign = 'left';
  td.style.verticalAlign = 'bottom';
  input = DOMUtils.createInput(null, null, 'text', this._item.name, null);
  input.style.width = '210px';
  input.style.height = '21px';
  input.id = this._prefix + 'attributeName';
  td.appendChild(input);
  td = tr.insertCell(-1);
  td.style.width = '10px';
  td.style.textAlign = 'right';
  td.style.verticalAlign = 'bottom';
  var del = document.createElement('img');
  del.src = 'images/pageasst/pagebackendsample/delete.png';
  del.style.cursor = 'pointer';
  del.id = this._prefix + 'attributeDel';
  td.appendChild(del);
  
  tr = contentTable.insertRow(-1);
  td = tr.insertCell(-1);
  td.colSpan = 6;
  td.style.height = '3px';
  td.style.verticalAlign = 'top';
  var line = document.createElement('img');
  line.src = 'images/pageasst/pagebackendsample/line.png';
  td.appendChild(line);
  
  tr = contentTable.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.width = '730px';
  td.style.height = '60px';
  td.colSpan = 6;
  td.style.verticalAlign = 'top';
  var optionTable = document.createElement('table');
  optionTable.style.width = '730px';
  optionTable.style.height = '60px';
  optionTable.cellSpacing = 0;
  optionTable.cellPadding = 0;
  td.appendChild(optionTable);
  for (var i = 0, il = this._item.options.length; i < il; i++) {
    var option = this._item.options[i];
    itable = document.createElement('table');
    itable.style.backgroundImage = 'url(images/pageasst/pagebackendsample/optionbg.png)';
    itable.style.backgroundRepeat = 'no-repeat';
    itable.style.width = '130px';
    itable.style.height = '39px';
    itable.cellPadding = 0;
    itable.cellSpacing = 0;
    itable.style.margin = '4px 15px 2px 0';
    if (optionTable.rows.length == 0)  {
      optionTable.insertRow(-1).insertCell(-1).appendChild(itable);
    } else if (optionTable.rows[optionTable.rows.length - 1].cells.length < 4) {
      optionTable.rows[optionTable.rows.length - 1].insertCell(-1).appendChild(itable);
    } else {
      optionTable.insertRow(-1).insertCell(-1).appendChild(itable);
    }
  
    itr = itable.insertRow(-1);
    itd = itr.insertCell(-1);
    itd.style.textAlign = 'left';
    itd.style.verticalAlign = 'middle';
    itd.style.fontSize = '13px';
    itd.style.fontFamily = 'Tahoma';
    itd.style.fontWeight = 'bold';
    itd.style.color = '#0099cc';
    input = DOMUtils.createInput(null, null, 'text', option.name, null);
    input.style.width = '80px';
    input.style.height = '20px';
    input.style.margin = '0 0 0 5px';
    input.id = this._prefix + i + 'optionName';
    itd.appendChild(input);
    itd = itr.insertCell(-1);
    itd.style.textAlign = 'left';
    itd.style.verticalAlign = 'middle';
    var del = document.createElement('img');
    del.src = 'images/pageasst/pagebackendsample/del.png';
    del.style.cursor = 'pointer';
    del.id = this._prefix + i + 'optionDel';
    itd.appendChild(del);
  }
  
  tr = contentTable.insertRow(-1);
  td = tr.insertCell(-1);
  td.colSpan = 2;
  td.style.height = '30px';
  td.style.textAlign = 'right';
  td.style.verticalAlign = 'top';
  var option = document.createElement('img');
  option.src = 'images/pageasst/pagebackendsample/addoption.png';
  option.style.cursor = 'pointer';
  option.id = this._prefix + 'option';
  td.appendChild(option);
  
  table = document.createElement('table');
  table.style.backgroundImage = 'url(images/pageasst/pagebackendsample/attrbottom.png)';
  table.style.backgroundRepeat = 'no-repeat';
  table.style.width = '833px';
  table.style.height = '15px';
  table.cellPadding = 0;
  table.cellSpacing = 0;
  this._container.appendChild(table);
};
